<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3GBDVezdN6lmtX0H6NGIzIhGUEXyE1CM"></script>
        <title>批量地址解析</title>
        <style>
            body,html{
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #container{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #result{
                position: fixed;
                top: 10px;
                right: 10px;
                width: 350px;
                height: 480px;
                line-height: 30px;
                text-align: center;
                background: #fff;
                box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
                border-radius: 7px;
                z-index: 99;
            }
            #result>div:first-child{
                width: 100%;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: #00BFFF;
                border-radius: 7px 7px 0px 0px;
                color: #fff;
            }
            #result ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #result ul li{
                color: #000;
                padding: 7px;
                font-size: 14px;
                text-align: justify;
                border-bottom: 1px solid #D3D3D3
            }
            #result>div:last-child{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 10px;
            }
            .btn{
                width: 100px;
                height: 35px;
                color: #fff;
                font-size: 14px;;
                border-radius: 5px;
                background: #00BFFF;
                box-shadow: none;
            }
            .btn:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id='container'></div>
        <div id='result'>
            <div>批量地址解析</div>
            <ul>
                <li>1、包河区金寨路1号（金寨路与望江西路交叉口）</li>
                <li>2、庐阳区凤台路209号（凤台路与蒙城北路交叉口）</li>
                <li>3、蜀山区金寨路217号(近安医附院公交车站)</li>
                <li>4、蜀山区梅山路10号(近安徽饭店)</li>
                <li>5、蜀山区 长丰南路159号铜锣湾广场312室</li>
                <li>6、合肥市寿春路93号钱柜星乐町KTV（逍遥津公园对面）</li>
                <li>7、庐阳区长江中路177号</li>
                <li>8、新站区胜利路89</li>
            </ul>
            <div>
                <button onclick='bdGEO()' class='btn'>批量解析</button>
            </div>
        </div>
        <script>
            var map = new BMapGL.Map('container');
            map.centerAndZoom(new BMapGL.Point(117.269945,31.86713), 13);
            map.enableScrollWheelZoom(true);
            var myGeo = new BMapGL.Geocoder();
            var adds = [
                "包河区金寨路1号（金寨路与望江西路交叉口）",
                "庐阳区凤台路209号（凤台路与蒙城北路交叉口）",
                "蜀山区金寨路217号(近安医附院公交车站)",
                "蜀山区梅山路10号(近安徽饭店) ",
                "蜀山区 长丰南路159号铜锣湾广场312室",
                "合肥市寿春路93号钱柜星乐町KTV（逍遥津公园对面）",
                "庐阳区长江中路177号",
                "新站区胜利路89"
            ];
            var index = 0;
            function bdGEO(){
                if (index < adds.length) {
                    var add = adds[index];
                    geocodeSearch(add);
                    index++;
                }
            }
            function geocodeSearch(add){
                if(index < adds.length){
                    setTimeout(window.bdGEO,400);
                }
                myGeo.getPoint(add, function(point){
                    if (point) {
                        var address = new BMapGL.Point(point.lng, point.lat);
                        addMarker(address,new BMapGL.Label(index+":"+add,{offset:new BMapGL.Size(10,-10)}));
                    }
                }, "合肥市");
            }
            // 编写自定义函数,创建标注
            function addMarker(point,label){
                var marker = new BMapGL.Marker(point);
                map.addOverlay(marker);
                marker.setLabel(label);
            }
        </script>
    </body>
</html>
